<template>
  <div id="app">
    <div id="container"></div>
    <div id="panel" style="opacity: 0;"></div>
    <div style="position: absolute;bottom: 100px;padding: 5px 10px;background-color: #FFF;border-radius: 20px;font-size: 14px" @click="testLngLat">手动改变经纬度</div>
    <div class="bottom">
      <div class="btn1" @click="payment">发起收款</div>
    </div>
  </div>
</template>

<script>
import {charge} from "../../api";

export default {
  name: "driverStart",
  data() {
    return {
      webSocket: {}
    }
  },
  created() {
    let _this = this
    console.log(_this.$store.state.driverInfo.token)
    this.webSocket = new WebSocket('wss://192.168.137.1:8813/orderSocket/' + _this.$store.state.driverInfo.token);
    this.webSocket.onerror = function (event) {
      onError(event)
    };
    this.webSocket.onopen = function (event) {
      onOpen(event)
    };
    this.webSocket.onmessage = function (event) {
      onMessage(event)
    };
    function onMessage(event) {
      let msg = JSON.parse(event.data)
      if (msg && msg.ping && msg.ping != '') {

      } else {
      }
    }
    function onOpen(event) {
      console.log('Connection established')
    }
    function onError(event) {
      alert(event.data);
    }

  },
  mounted() {
    let _this = this
    //基本地图加载
    var map = new AMap.Map("container", {
      resizeEnable: true,
      center: [116.397428, 39.90923],//地图中心点
      zoom: 13 //地图显示的缩放级别
    });
    //构造路线导航类
    var driving = new AMap.Driving({
      map: map,
      panel: "panel"
    });
    // 根据起终点经纬度规划驾车导航路线
    driving.search(new AMap.LngLat(_this.$store.state.order.startLongitude, _this.$store.state.order.startLatitude), new AMap.LngLat(_this.$store.state.order.endLongitude, _this.$store.state.order.endLatitude), function(status, result) {
      // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
      if (status === 'complete') {
        log.success('绘制驾车路线完成')
      } else {
        log.error('获取驾车数据失败：' + result)
      }
    });
  },
  destroyed() {
    this.webSocket.close()
  },
  methods: {
    testLngLat: function () {
      let _this = this
      this.$store.state.order.startLongitude = this.$store.state.order.endLongitude
      this.$store.state.order.startLatitude = this.$store.state.order.endLatitude
      let positionPackage = {
        orderNumber: _this.$store.state.order.orderNumber
      }
      this.webSocket.send('{"to":"' + _this.$store.state.order.passengerToken + '","msg":' + JSON.stringify(positionPackage) + '}');
      setTimeout(() => {
        _this.$router.replace({ path:'/empty', query: {urls: 'driverStart'} })
      },1000)
    },
    payment: function () {
      let _this = this
      let msgPackage = {
        pay: 1
      }
      let params = new URLSearchParams()
      params.append('orderNumber', _this.$store.state.order.orderNumber)
      params.append('driverId', _this.$store.state.driverInfo.id)
      charge(params)
      .then(res => {
        if (res.result === true) {
          let msgPackage = {
            pay: 1
          }
          _this.webSocket.send('{"to":"' + _this.$store.state.order.passengerToken + '","msg":' + JSON.stringify(msgPackage) + '}');
        }
        setTimeout(() => {
          _this.$router.push('/driver/order/end')
        }, 1000)
      })
      .catch(err => {
        console.log("发起收款失败")
      })
    }
  }
}
</script>

<style scoped>
#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
.bottom{
  z-index: 200;
  width: 100%;
  height: 80px;
  background-color: #FFF;
  position: fixed;
  bottom: 0px;
  box-shadow: 0 0px 15px rgba(0,0,0,.2);
}
.btn1{
  position: relative;
  top: 20px;
  margin: 0 auto;
  width: 80%;
  height: 40px;
  border-radius: 20px;
  background-color: #ff6f1c;
  color: #FFF;
  line-height: 38px;
  box-shadow: 0 0px 15px rgba(0,0,0,.3);
}
</style>
